<template>
  <div class="warp-container">
    <!-- 导航栏 编辑器-->
    <div v-if="queryParams && queryParams.design_type == 1" class="header-container">
      <Header />
    </div>
    <div v-else class="header-container">
      <Header />
    </div>
    <!-- 导航栏 -->

    <!-- 画布 -->
    <div id="canvasContentEl" class="canvas-content">
      <canvas ref="canvasContentEl1" id="canvas"></canvas>
      <div class="water-container"></div>
    </div>
    <!-- 画布 -->

    <!-- 尾部 -->
    <div v-if="queryParams && queryParams.design_type == 1" id="footer-container" class="footer-container">
      <Footer />
    </div>
    <!-- 用户尾部 -->

    <!-- 提示 -->
    <div
      v-else
      id="footer-container"
      class="footer-container"
      :class="{
        'design-footer-container': queryParams && queryParams.design_type == 2
      }">
      <!-- 通知栏 -->
      <div class="noticebar">
        <div class="noticebar-text">
          <span class="color-red">温馨提示：&#8593 &#8593</span>
          <span class="color-gary">内容可</span>
          <span class="color-blue">移动</span>
          <span class="color-gary">(按住拖动)、</span>
          <span class="color-blue">缩放</span>
          <span class="color-gary">(按住</span>
          <img class="image-icon" src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01SLRwMV2BzNOm6ulMZ_!!1888948409.png">
          <span class="color-gary">可缩放)、</span>
          <span class="color-blue">旋转</span>
          <span class="color-gary">(按住</span>
          <img class="image-icon" src="../../assets/images/common/rotate.png">
          <span class="color-gary">可旋转)、</span>
          <span class="color-gary">可缩放)、</span>
          <span class="color-blue">镜像</span>
          <span class="color-gary">(按住</span>
          <img class="image-icon" src="../../assets/images/common/jingxiang.png">
          <span class="color-gary">可镜像)、</span>
          <span class="color-gary">可改字、可换图，保存后高清无水印。</span>
        </div>
      </div>

      <!-- 更换元素 -->
      <div class="change-object">
        <div
          class="change-object-item"
          :class="{
            'active': currentChangeType === 'changeText'
          }"
          @click="handleChangeType('changeText')">换姓氏</div>
        <!-- <div
          v-if="imageListData && imageListData.length > 0"
          class="change-object-item"
          :class="{
            'active': currentChangeType === 'changeImage'
          }"
          @click="handleChangeType('changeImage')">换图/文字</div> -->
        <div
          v-if="stickerList && stickerList.length > 0"
          class="change-object-item"
          :class="{
            'active': currentChangeType === 'changeSticker'
          }"
          @click="handleChangeType('changeSticker')">换挂件</div>
        <div
          class="change-object-item"
          :class="{
            'active': currentChangeType === 'changeTemplate'
          }"
          @click="handleChangeType('changeTemplate')">换模板</div>
      </div>

      <!-- 元素列表 -->
      <div class="footer-layer-container">
        <div v-if="currentChangeType === 'changeText'" class="layer-content">
          <div
            v-for="(item, index) in itemList" :key="index">
            <div
              v-if="item.type === 'textbox' && item.textDirection"
              class="layer-item layer-item-active"
              :class="{
                'layer-item-active': currentSelectionElement && index === currentSelectionElement._index
              }"
              @click="handleSurnameObjectItem(index)">
              <!-- 图片 -->
              <div class="textbox-item2">
                <div v-if="item.xieYinText" class="text-item"><span class="text">{{ item.xieYinText }}</span></div>
                <div class="text-item"><span class="text">{{ item.text }}</span></div>
                <!-- <div class="change-image-tip">
                  <van-icon name="edit" size="20" />
                  <div class="change-image-text">点击更换</div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <div v-if="currentChangeType === 'changeImage'" class="layer-content">
          <div
            v-for="(item, index) in itemList" :key="index">
            <div
              v-if="item.selectable && !item.isXieyinImage"
              class="layer-item"
              :class="{
                'layer-item-active': currentSelectionElement && index === currentSelectionElement._index
              }"
              @click="handleObjectItem(index)">
              <!-- 图片 -->
              <div v-if="item.type === 'image'" class="img-item">
                <van-image
                  width="100%"
                  height="100%"
                  fit="contain"
                  :src="item.src"
                />
                <div v-if="currentSelectionElement && index === currentSelectionElement._index" class="change-image-tip">
                  <van-icon name="photo-o" size="20" />
                  <div class="change-image-text">点击替换</div>
                </div>
              </div>
              <div v-else class="textbox-item">
                <span class="text">{{ item.text }}</span>
                <div v-if="currentSelectionElement && index === currentSelectionElement._index" class="change-image-tip">
                  <van-icon name="edit" size="20" />
                  <div class="change-image-text">编辑文字</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="currentChangeType === 'changeSticker'" class="layer-content">
          <div
            v-for="(item, index) in stickerList" :key="index">
            <!-- 图片 -->
            <div
              class="layer-item"
              :class="{
                'layer-item-active': index === currentStickerIndex
              }"
              @click="handleChangeSticker(index, item.image)">
              <div class="img-item">
                <van-image
                  width="100%"
                  height="100%"
                  fit="contain"
                  :src="item.image"
                />
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="currentChangeType === 'changeTemplate'" class="layer-content">
          <div
            v-for="(item,index) in templateList" :key="index">
            <!-- 图片 -->
            <div
              class="layer-item"
              :class="{
                'layer-item-active': item.id == currentTemplateId
              }"
              @click="handleTemplate(item)">
              <div class="img-item">
                <van-image
                  width="100%"
                  height="100%"
                  fit="contain"
                  :src="item.cover_url"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 隐藏点击上传图片元素 -->
    <van-uploader
      v-if="queryParams && (queryParams.origin === 'h5' || queryParams.origin === 'kuaishou' || queryParams.origin === 'weixin')"
      id="h5Upload"
      name="file"
      style="display: none;"
      :preview-image="false"
      :after-read="h5UploadImage">
    </van-uploader>

    <!-- 更换文字 -->
    <van-popup
      v-model="showPopup"
      @close="handleEditTextClose"
      position="center"
      class="edit-text-container"
      :overlay-style="{
        background: 'rgba(0, 0, 0, .8)'
      }">
      <div class="edit-text-content">
        <div class="title-content">修改内容</div>
        <van-field
          v-model="text"
          label=""
          size="large"
          label-width="0"
          placeholder="请输入您要替换的文字"
          class="text-field"
          :clearable="true" />
      </div>
      <div class="btn-container">
        <van-button type="default" block style="margin-right: 12px;" @click="handleEditTextClose">关闭</van-button>
        <van-button type="info" block @click="handleConfirmText" color="linear-gradient(to right, #8773f9, #1989fa)">确定</van-button>
      </div>
    </van-popup>

    <!-- 谐音姓氏 -->
    <van-popup
      v-model="showXieYinPopup"
      @close="handleXieYinClose"
      position="center"
      :close-on-click-overlay="true"
      class="surname-xieyin-container"
      :overlay-style="{
        background: 'rgba(0, 0, 0, .8)'
      }">
      <div class="surname-xieyin-title">查找姓氏谐音</div>
      <div class="xieyin-container">
        <div class="xieyin-left">
          <div class="surname-content">
            <van-field
              v-model="surname1"
              label="输入姓氏"
              size="large"
              label-width="70"
              placeholder="输入您的姓氏"
              @click="currentSurname = 1"
              @input="checkText"
              class="surname-field surname-field1">
              <template #button>
              </template>
            </van-field>
          </div>
          <div class="xieyin-content">
            <div class="xieyin-item-content">
              <div
                class="xieyin-item"
                v-for="(item, index) in xieyinList1"
                :key="index"
                :class="{
                  'active': index === currentXinyinIndex1
                }"
                @click="currentXinyinIndex1 = index">{{ item }}</div>
                <div v-if="surname1" class="xieyin-item add-item-xinyin" @click="handleCustomSurnameXieyin(1)">
                  <van-icon name="add-o" style="position: relative; top: 1px;margin-right: 2px;" />
                  <span style="font-size: 12px;">自定义</span>
                </div>
            </div>
          </div>
        </div>
        <div class="xieyin-right" style="display: none;">
          <div class="surname-content">
            <van-field
              v-model="surname2"
              label="女生姓氏"
              size="large"
              label-width="70"
              placeholder="输入姓氏"
              @click="currentSurname = 2"
              @input="querySurnameXinyinBySurname"
              class="surname-field surname-field2">
              <template #button>
              </template>
            </van-field>
          </div>
          <div class="xieyin-content">
            <div class="xieyin-item-content">
              <div
                class="xieyin-item"
                v-for="(item, index) in xieyinList2"
                :key="index"
                :class="{
                  'active': index === currentXinyinIndex2
                }"
                @click="currentXinyinIndex2 = index">{{ item }}</div>
                <div v-if="surname2" class="xieyin-item add-item-xinyin" @click="handleCustomSurnameXieyin(2)">
                  <van-icon name="add-o" style="position: relative; top: 1px;margin-right: 2px;" />
                  <span style="font-size: 12px;">自定义</span>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="xieyin-btn">
        <div class="confirm-btn" @click="confirmSurnameXinyin">确定</div>
      </div>
    </van-popup>

    <!-- 自定义谐音 -->
    <van-popup
      v-model="showCustomSurnameXieyin"
      position="center"
      class="custom-surname-container">
      <div>
        <div class="custom-surname-title">当前姓氏：{{ currentCustomSurnameXieyin == 1 ? surname1 : surname2 }}</div>
        <div class="custom-surname-item">
          <van-field
            v-model="customSurnameXinyin"
            rows="1"
            label=""
            label-width="0"
            type="textarea"
            placeholder="请输入姓氏谐音例如(刘：为爱停刘)"
          />
        </div>
        <div class="custom-surname-btn">
          <div class="cancel-btn btn" @click="showCustomSurnameXieyin = false">取消</div>
          <div class="confirm-btn btn" @click="handleConfirmCustomSurnameXieyin">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import {
  diyTemplateDetailById,
  getAuthToke,
  checkTxt,
  querySurnameXinyinBySurname,
  templateAllListByToolId,
} from "@/utils/api";
export default {
  name: "Me",
  components: {
    Footer,
    Header,
  },
  data() {
    return {
      showXieYinPopup: true,
      showSelectBackground: false,
      canvas: null,
      queryParams: null,
      showPopup: false,
      text: "",
      currentIndex: 0,
      itemList: [],
      currentSelectionElement: null,
      surname1: "",
      surname2: "",
      showCustomSurnameXieyin: false, // 设置自定义谐音
      currentCustomSurnameXieyin: "", // 当前自定义谐音类型
      customSurnameXinyin: "", // 自定义谐音表单
      imageListData: [], // 图片列表
      templateList: [], // 模板列表
      currentTemplateId: "", // 当前模板id
      currentSurname: 1, // 当前输入谐音
      stickerList: [], // 贴纸列表
      currentStickerIndex: 0, // 当前贴纸
      xieyinList1: [], // 谐音列表1
      xieyinList2: [], // 谐音列表2
      currentXinyinIndex1: 0, // 当前选中谐音
      currentXinyinIndex2: 0, // 当前选中谐音
      currentChangeType: "changeText", // 当前更换类型
    };
  },

  watch: {
    "$store.state.user.queryParams": {
      immediate: true,
      handler(val, oldVal) {
        this.queryParams = val;
      },
    },
    "$store.state.design.currentChangeType": {
      handler(val, oldVal) {
        this.currentChangeType = val;
      },
    },
    "$store.state.design.showTextFlag": {
      immediate: true,
      handler(val, oldVal) {
        console.log("val>", val, "oldVal>", oldVal);
        if (val) {
          const handAccountCanvas = this.handAccountCanvas
            .getObject()
            .getActiveObject();
          this.text = handAccountCanvas.text;
          this.handleChangeType("changeText");
          this.handleSurnameObjectItem();
          console.log(2222222);
        }
        // this.showPopup = val;
      },
    },
    "$store.state.design.showXinYinFlag": {
      immediate: true,
      handler(val, oldVal) {
        this.showXieYinPopup = val;
      },
    },
    "$store.state.design.currentSelectionElement": {
      immediate: true,
      handler(val, oldVal) {
        if (val) {
          this.currentSelectionElement = val;
        } else {
          this.currentSelectionElement = null;
        }
      },
    },
    "$store.state.design.itemList": {
      immediate: true,
      deep: true,
      handler(val, oldVal) {
        if (val) {
          this.itemList = val;
        }
      },
    },
  },

  mounted() {
    this.$nextTick(async () => {
      let queryParams = this.$store.state.user.queryParams;
      this.getAuthToke();
      await this.handAccountCanvas.initCanvas(queryParams.design_type);
      this.getDiyTemplateDetailById();
    });
  },
  methods: {
    // 关闭函数
    beforeClose(action, done) {
      if (action !== "confirm") {
        done();
      }
    },

    // 确定当前自定义谐音
    handleConfirmCustomSurnameXieyin() {
      let currentCustomSurnameXieyin = this.currentCustomSurnameXieyin;
      let surname =
        currentCustomSurnameXieyin == 1 ? this.surname1 : this.surname2;
      let customSurnameXinyin = this.customSurnameXinyin;
      if (customSurnameXinyin && customSurnameXinyin.length === 4) {
        let customSurnameXinyinArray = customSurnameXinyin.split("");
        let surnameIndex = customSurnameXinyinArray.findIndex(
          (item) => item === surname
        );
        if (surnameIndex < 0) {
          this.$toast({
            position: "top",
            message: "当前输入的内容未包含姓氏",
            duration: 3 * 1000,
          });
        } else {
          if (currentCustomSurnameXieyin == 1) {
            this.xieyinList1.unshift(customSurnameXinyin);
            this.currentXinyinIndex1 = 0;
          } else if (currentCustomSurnameXieyin == 2) {
            this.xieyinList2.unshift(customSurnameXinyin);
            this.currentXinyinIndex2 = 0;
          }
          this.showCustomSurnameXieyin = false;
          this.customSurnameXinyin = "";
        }
      } else {
        this.$toast({
          position: "top",
          message: "请输入姓氏谐音，四个字",
          duration: 3 * 1000,
        });
      }
    },

    // 自定义谐音
    handleCustomSurnameXieyin(currentCustomSurnameXieyin) {
      this.currentCustomSurnameXieyin = currentCustomSurnameXieyin;
      this.showCustomSurnameXieyin = true;
    },

    // 切换类型
    handleChangeType(currentChangeType) {
      if(currentChangeType == 'changeText'){
        this.handAccountCanvas.setItemActive();
      }
      this.currentChangeType = currentChangeType;
      this.$store.dispatch("design/setCurrentChangeType", currentChangeType);
    },

    // 更换贴纸
    handleChangeSticker(index, image) {
      this.currentStickerIndex = index;
      this.handAccountCanvas.changeSticker({
        uri: image,
      });
    },

    // 确定姓氏
    confirmSurnameXinyin() {
      let surname1 = this.surname1;
      console.log("surname1", surname1);
      let surnameXieyin1 = this.xieyinList1[this.currentXinyinIndex1];
      if (!surname1) {
        return this.$toast({
          position: "top",
          message: "请输入你的姓氏",
          duration: 3 * 1000,
        });
      }
      if (!surnameXieyin1) {
        return this.$toast({
          position: "top",
          message: "请选择你的姓氏谐音短句或成语",
          duration: 3 * 1000,
        });
      }
      this.handAccountCanvas.updateTextBox({
        type: "text",
        content: surname1,
      });
      // this.itemList.map((i) => {
      //   if (i.text) {
      //     i.text = this.surname1;
      //     console.log(i)
      //   }
      // });
      console.log(34343, this.itemList)
      // 更改你的姓氏
      this.handAccountCanvas
        .changeSurnameXieYie({
          type: "changeXieYin",
          content: {
            text: surnameXieyin1,
            xieYinText: surname1,
            xieyinIndex: 0,
          },
        })
        .then(() => {
          this.handleXieYinClose();
          this.$store.dispatch("design/setShowTetxFlag", false);
          this.handAccountCanvas.setItemActive();
          this.$toast({
            position: "center",
            message: "操作成功",
            duration: 3 * 1000,
          });
        });
    },
    checkText(val) {
      // console.log('444444',this.currentSelectionElement,this.currentSelectionElement._index)
      if (!this.currentSelectionElement) {
        this.handleXieYinClose();
        this.$toast({
          position: "center",
          message: "请选中姓氏",
          duration: 3 * 1000,
        });
        return;
      }
      const regex = /^[\u4e00-\u9fa5]{1}$/;
      if (!regex.test(val)) {
        // 如果不符合规则，则设置为上一个合法的值
        this.surname1 = val.charAt(0);
      }
      if (this.surname1.length > 0) {
        this.$toast.loading({
          message: "检测中...",
          position: "center",
          forbidClick: true,
          duration: 0,
        });
        checkTxt({
          text: this.surname1,
        })
          .then((result) => {
            this.$toast.clear();
            if (result && result.data) {
              // this.itemList[this.currentSelectionElement._index].text = this.surname1;
              this.querySurnameXinyinBySurname();
            }
          })
          .catch((err) => {
            this.$toast.clear();
            this.$toast({
              message: err.msg,
              duration: 1500,
              forbidClick: true,
            });
          });
      }
    },
    // 搜索姓氏谐音成语
    async querySurnameXinyinBySurname() {
      let surname = this.currentSurname == 1 ? this.surname1 : this.surname2;
      const reg = /^[\u4E00-\u9FA5]+$/;
      if (reg.test(surname)) {
        this.$toast.loading({
          message: "加载中...",
          position: "center",
          forbidClick: true,
          duration: 0,
        });
        await querySurnameXinyinBySurname({
          surname,
        })
          .then((result) => {
            this.$toast.clear();
            if (result && result.data && result.data.surname_xieyin_1) {
              if (this.currentSurname == 1) {
                this.xieyinList1 = result.data.surname_xieyin_1;
                this.currentXinyinIndex1 = 0;
              } else {
                this.xieyinList2 = result.data.surname_xieyin_1;
                this.currentXinyinIndex2 = 0;
              }
            } else {
              if (this.currentSurname == 1) {
                this.xieyinList1 = [];
                this.currentXinyinIndex1 = 0;
              } else {
                this.xieyinList2 = [];
                this.currentXinyinIndex2 = 0;
              }
              this.$toast({
                position: "top",
                message: "暂未收录此姓氏谐音;\n可通过自定义内容哦",
                duration: 3 * 1000,
              });
            }
          })
          .catch(() => {
            this.$toast.clear();
          });
      }
    },

    // 关闭谐音框
    handleXieYinClose() {
      this.$store.dispatch("design/setShowXieYinFlag", false);
    },

    // 设置
    handleObjectItem(_index) {
      const handAccountCanvas = this.handAccountCanvas.getObject();
      const items = handAccountCanvas.getObjects();
      let actvieItem = items[_index];
      handAccountCanvas.setActiveObject(actvieItem);
      handAccountCanvas.renderAll();
      if (actvieItem.type === "textbox") {
        this.$store.dispatch("design/setShowTetxFlag", true);
      } else if (actvieItem.type === "image") {
        this.handAccountCanvas.handleChangeImage();
      }
    },

    // 修改姓氏
    async handleSurnameObjectItem() {
      console.log(55555555);
      this.$store.dispatch("design/setShowXieYinFlag", true);
      let xieyinLetterList = this.itemList.filter((item) => item.textDirection);
      console.log(xieyinLetterList);
      let index = 0;
      for (const item of xieyinLetterList) {
        index = index + 1;
        this.currentSurname = index;
        if (index === 1) {
          this.surname1 = item.xieYinText;
          await this.querySurnameXinyinBySurname();
        } else {
          this.surname2 = item.xieYinText;
          await this.querySurnameXinyinBySurname();
        }
      }
      console.log(this.surname1, this.surname2);
    },

    // 确定输入文字
    handleConfirmText() {
      this.$toast.loading({
        message: "检测中...",
        position: "center",
        forbidClick: true,
        duration: 0,
      });
      checkTxt({
        text: this.text,
      })
        .then((result) => {
          this.$toast.clear();
          console.log("itemList", this.itemList);
          if (result && result.data) {
            this.handAccountCanvas.updateTextBox({
              type: "text",
              content: this.text,
            });
            this.handleEditTextClose();
            this.itemList[this.currentSelectionElement._index].text = this.text;
          }
        })
        .catch((err) => {
          this.$toast.clear();
          this.$toast({
            message: err.msg,
            duration: 1500,
            forbidClick: true,
          });
        });
    },

    // 关闭文字框
    handleEditTextClose() {
      this.$store.dispatch("design/setShowTetxFlag", false);
    },

    // 上传图片
    h5UploadImage(files) {
      this.handAccountCanvas.h5Upload(files).then((result) => {
        let image = result.cover_path;
        // 检测图片
        this.handAccountCanvas.censorImage(image).then((result_) => {
          this.handAccountCanvas
            .updatedImageItem({
              type: "src",
              uri: result_.url,
            })
            .then((imageResult) => {
              this.itemList[this.currentSelectionElement._index].src =
                result_.url;
              if (imageResult && imageResult.width > 200) {
                this.handAccountCanvas.updatedImageItem({
                  type: "width",
                });
              }
            });
        });
      });
    },

    // 点击模板
    handleTemplate(itemData) {
      let queryParams = this.$store.state.user.queryParams;
      let data = itemData;
      let imageListData = [];
      this.$store.dispatch("design/setTemplateDetail", data);
      let params = data.params;
      params.objects.forEach((item, index) => {
        item._index = index;
        if (item.type === "image" && item.selectable && !item.isXieyinImage) {
          imageListData.push(item);
        } else if (item.type === "textbox" && item.selectable) {
          imageListData.push(item);
        }
      });
      this.imageListData = imageListData;
      this.$store.dispatch("design/setItemList", params.objects);
      this.handAccountCanvas.reloadCanvas().then(() => {
        this.handAccountCanvas
          .canvasLoadJson(params, queryParams.design_type, 2)
          .then(() => {
            // this.handAccountCanvas.setFirstItemActive();

            let surname1 = this.surname1;
            let surname2 = this.surname2;
            let surnameXieyin1 = this.xieyinList1[this.currentXinyinIndex1];
            let surnameXieyin2 = this.xieyinList2[this.currentXinyinIndex2];

            if (surname1 && surname2 && surnameXieyin1 && surnameXieyin2) {
              // 更改你的姓氏
              this.handAccountCanvas
                .changeSurnameXieYie({
                  type: "changeXieYin",
                  content: {
                    text: surnameXieyin1,
                    xieYinText: surname1,
                    xieyinIndex: 0,
                  },
                })
                .then(() => {
                  // 更改Ta的姓氏
                  this.handAccountCanvas
                    .changeSurnameXieYie({
                      type: "changeXieYin",
                      content: {
                        text: surnameXieyin2,
                        xieYinText: surname2,
                        xieyinIndex: 1,
                      },
                    })
                    .then(() => {
                      this.handleXieYinClose();
                    });
                });
            }
          });
      });

      // 贴纸
      this.stickerList = data.items;

      // 当前模板id
      this.currentTemplateId = data.id;
    },

    // 获取详情
    getDiyTemplateDetailById() {
      let queryParams = this.$store.state.user.queryParams;
      let currentTime = parseInt(new Date().getTime() / 1000);
      let requestTime = parseInt((queryParams.t || 0) / 1000);
      if (
        queryParams.t &&
        currentTime - requestTime > 90 &&
        queryParams.origin !== "h5"
      ) {
        location.href = "https://design.guxitk.com";
        return;
      }
      if (queryParams.id) {
        this.$toast.loading({
          message: "加载中",
          position: "center",
          forbidClick: true,
          duration: 0,
        });
        diyTemplateDetailById({
          id: queryParams.id,
        })
          .then((result) => {
            this.$toast.clear();
            if (result && result.data) {
              let data = result.data;
              let imageListData = [];
              this.$store.dispatch("design/setTemplateDetail", data);
              let params = data.params;
              params.objects.forEach((item, index) => {
                item._index = index;

                if (
                  item.type === "image" &&
                  item.selectable &&
                  !item.isXieyinImage
                ) {
                  imageListData.push(item);
                }
              });
              this.$store.dispatch("design/setItemList", params.objects);
              this.handAccountCanvas
                .canvasLoadJson(params, queryParams.design_type)
                .then(() => {
                  this.handAccountCanvas.setItemActive();
                });

              // 换图
              this.imageListData = imageListData;

              // 贴纸
              this.stickerList = data.items;

              // 获取其他模板
              this.currentTemplateId = data.id;
              this.getTemplateAllListByToolId(data.tool_id);
            }
          })
          .catch(() => {
            this.$toast.clear();
          });
      }
    },

    // 获取其他模板列表
    getTemplateAllListByToolId(tool_id) {
      templateAllListByToolId({
        tool_id,
      }).then((result) => {
        if (result && result.data && result.data.length > 0) {
          this.templateList = result.data;
        }
      });
    },

    // 获取token
    getAuthToke() {
      let queryParams = this.$store.state.user.queryParams;
      let currentTime = parseInt(new Date().getTime() / 1000);
      let requestTime = parseInt((queryParams.t || 0) / 1000);
      if (
        queryParams.t &&
        currentTime - requestTime > 90 &&
        queryParams.origin !== "h5"
      ) {
        location.href = "https://design.guxitk.com";
        return;
      }
      if (queryParams && queryParams.auth_key) {
        getAuthToke({
          auth_key: queryParams.auth_key,
        }).then((result) => {
          if (result && result.data && result.data.token) {
            this.$store.dispatch("user/setToken", result.data.token);
          }
        });
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import "../../assets/common.less";

.warp-container {
  height: 100%;
  background-color: @accessoryColor;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.canvas-container {
  // border-radius: 8px;
  overflow-x: hidden;
  -webkit-transform: rotate(0deg);
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.canvas-content {
  width: 100%;
  // border-radius: 8px;
  // overflow: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  -webkit-transform: rotate(0deg);
  position: relative;
  background-size: cover;

  .water-container {
    width: 100%;
    height: 100%;
    // background: url(https://img.alicdn.com/imgextra/i4/1888948409/O1CN01teMfIu2BzNOvSPmhT_!!1888948409.png);
    background: url(https://baiwan-product.oss-cn-hangzhou.aliyuncs.com/watermark/desingshuiying.png);
    background-size: cover;
    position: absolute;
    pointer-events: none;
  }
}

.header-container {
  height: 46px;
  width: 100%;
  background: @accessoryColor;
  // position: fixed;
  // top: 0;
  // z-index: 999;
}

.header-container-padding {
  padding-top: 12px;
}

.footer-container {
  height: 68px;
  width: 100%;
  background: @mainColor;
  position: relative;
  z-index: 9999;
}

.design-footer-container {
  height: 242px;
  z-index: 99;

  .noticebar {
    overflow: hidden;
    white-space: nowrap;
    background-color: #444;
    padding: 6px 0;
    display: flex;
    align-items: center;
    vertical-align: center;
    // margin-bottom: 8px;
  }

  .color-red {
    color: rgb(235, 32, 32);
    font-size: 12px;
  }

  .color-gary {
    color: #f5f5f5;
    font-size: 12px;
  }

  .color-blue {
    color: #8773f9;
    font-size: 12px;
  }

  .image-icon {
    width: 16px;
    height: 16px;
    position: relative;
    top: 4px;
  }

  .noticebar-text {
    display: inline-block;
    padding-left: 100%;
    animation: noticebar-slide 24s linear infinite;
  }
}

.footer-layer-container {
  width: 100%;

  .layer-content {
    // width: 100%;
    height: 156px;
    padding: 0 12px;
    display: flex;
    // align-items: center;
    overflow-y: auto;
    flex-wrap: wrap;

    .layer-item {
      max-width: 60px;
      min-width: 60px;
      height: 60px;
      margin-right: 5px;
      margin-bottom: 8px;
      border-radius: 4px;
      background-image: linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.8),
          rgba(0, 0, 0, 0.8)
        ),
        linear-gradient(90deg, #d2d2d2, #d2d2d2);
      border: 2px solid transparent;
      overflow: hidden;
    }

    // .layer-item:nth-child(5n) {
    //   margin-right: 0;
    // }

    .layer-item,
    .larer-item-active {
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
    }

    .layer-item-active {
      border: 2px solid transparent;
      border-radius: 4px;
      background-image: linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.8),
          rgba(0, 0, 0, 0.8)
        ),
        linear-gradient(180deg, #1989fa, #8773f9);
    }

    .textbox-item,
    .img-item {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .change-image-tip {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8773f9;
      flex-direction: column;
    }

    .change-image-text {
      font-size: 12px;
      font-weight: bold;
    }

    .textbox-item {
      width: 100%;
      height: 100%;
      padding: 2px;
      display: flex;
      align-items: center;
      justify-content: center;

      .text {
        font-size: 12px;
        color: #fff;
      }
    }

    .textbox-item2 {
      flex-wrap: wrap;
      padding: 2px;
      display: flex;
      align-items: center;
      padding: 12px 0;

      .text-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 16px;
        line-height: 16px;
      }

      .text-item:nth-child(1) {
        margin-bottom: 6px;
      }

      .text {
        font-size: 12px;
        color: #fff;
      }
    }
  }
}

.edit-text-container {
  width: 288px;
  padding: 12px 16px 24px 16px;
  border-radius: 8px;
  overflow: hidden;
  top: 25%;

  .title-content {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 12px 0 24px 0;
  }

  .text-field {
    background-color: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 24px;
  }

  .btn-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.surname-xieyin-container {
  width: 250px;
  padding: 16px 12px;
  border-radius: 8px;
  overflow: hidden;
  // top: 25%;

  .xieyin-container {
    display: flex;

    .xieyin-right,
    .xieyin-left {
      padding: 8px;
      display: flex;
      flex-wrap: wrap;
      flex: 1;
    }

    .xieyin-left {
      background-color: #e9f2fc;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }

    .xieyin-right {
      background-color: #fcf4f2;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    .van-field__label {
      margin-right: 6px;
    }

    .surname-field {
      padding: 10px 0;
    }

    .surname-field1 {
      background-color: #e9f2fc;
    }

    .surname-field2 {
      background-color: #fcf4f2;
    }

    .van-cell {
      align-items: center;
    }

    .van-field__control {
      background-color: #fff;
      text-align: center;
      height: 36px;
      border-radius: 4px;
    }

    .xieyin-content {
      width: 100%;
      padding: 12px;
      background: #fff;
      border-radius: 8px;
      display: flex;

      .xieyin-item-content {
        // display: flex;
        // flex-wrap: wrap;
        // justify-content: center;
        height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        margin: auto;
      }

      .xieyin-item {
        margin: auto;
        width: 100px;
        height: 32px;
        margin-bottom: 8px;
        border-radius: 4px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #646566;
        background: #f5f5f5;
      }

      .xieyin-item.active {
        background: linear-gradient(
          to right,
          rgb(135, 115, 249),
          rgb(25, 137, 250)
        );
        color: #fff;
      }

      .add-item-xinyin {
        color: rgb(25, 137, 250);
      }
    }
  }

  .xieyin-btn {
    margin-top: 12px;
    .confirm-btn {
      height: 48px;
      background: linear-gradient(
        to right,
        rgb(135, 115, 249),
        rgb(25, 137, 250)
      );
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
    }
  }
}

.change-object {
  height: 38px;
  padding-bottom: 18px;
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;

  .change-object-item {
    display: flex;
    flex: 1;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    position: relative;
    padding-bottom: 8px;
  }

  .change-object-item.active {
    color: #1989fa;
  }

  .change-object-item.active::before {
    display: block;
    content: "";
    width: 16px;
    height: 3px;
    background: #1989fa;
    border-radius: 1px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    margin: auto;
  }
}

.change-object::before {
  position: absolute;
  width: 100%;
  height: 1px;
  background: #888;
  bottom: 16px;
  left: 0;
  right: 0;
  content: "";
  display: block;
}

.surname-xieyin-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 0 0 12px 0;
  text-align: center;
}

.custom-surname-container {
  padding: 24px;
  width: 272px;
  border-radius: 8px;

  .custom-surname-title {
    font-size: 16px;
    padding-bottom: 24px;
    font-weight: bold;
    color: #333;
  }

  .custom-surname-btn {
    padding: 24px 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn {
      flex: 1;
      height: 36px;
      border-radius: 4px;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cancel-btn {
      margin-right: 24px;
      background-color: #f5f5f5;
      color: #888;
    }

    .confirm-btn {
      background: linear-gradient(to right, #8773f9, #1989fa);
      color: #fff;
    }
  }

  .van-field {
    background-color: #f5f5f5;
    border-radius: 8px;
  }
}

@keyframes noticebar-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 391px) {
  .footer-layer-container .layer-content .layer-item {
    // margin-right: 7px;
  }
}

@media screen and (max-width: 376px) {
  .footer-layer-container .layer-content .layer-item {
    // margin-right: 10px;
  }
}
</style>
